<template>
  <div><h3>修改密码</h3>
  <div class="main">
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="旧密码"
                  prop="oldPass"
                  >
      <el-input type="password" show-password v-model="ruleForm.oldPass" ></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="pass">
      <el-input
        show-password
        type="password"
        v-model="ruleForm.pass"
        autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input
        show-password
        type="password"
        v-model="ruleForm.checkPass"
        autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm',$store.state.user.email)">重置</el-button>
    </el-form-item>
  </el-form>
  </div>
  </div>
  </template>
  <script>
  import {changePassword} from "api/accountManage/changePW"
    export default {
       data() {
        const validataOldPass = (rule,value,callback) => {
          if (value ===''){
            callback(new Error('请输入旧密码'))
          }
          callback();
        }
        const validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkPass !== '') {
              this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
          }
        };
        const validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          ruleForm: {
            oldPass:'',
            pass: '',
            checkPass: '',
          },
          rules: {
            oldPass: [
              {validator:validataOldPass ,trigger: 'blur' }
            ],
            pass: [
              { validator: validatePass, trigger: 'blur' }
            ],
            checkPass: [
              { validator: validatePass2, trigger: ['blur','change'] }
            ],
          }
        };
      },
      methods: {
        submitForm(formName,userEmail) {

          this.$refs[formName].validate((valid) => {
            if (valid) {
              changePassword(this.ruleForm,userEmail).then(res=>{
                  const result = res && parseInt(res.code,10)
                  if (result === 200) {
                    this.$message({
                      center: true,
                      message: "修改成功",
                      type: 'success'
                    })
                  }else {
                    this.$message({
                      center: true,
                      message: res.message,
                      type: 'error'
                    })
                  }
                }).catch(onerror=>{
                  console.log(onerror);
                  this.$message({
                    center:true,
                    message:'网络错误，请稍后重试',
                    type:'error'
                  })
                })
            } else {
              this.$message({
                center:true,
                message:'填入信息有误',
                type:'warning'
              })
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
  </script>


<style>
.main{
  /*margin: auto 0 ;*/
}
.demo-ruleForm{
  margin-top:80px ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
</style>
